<template>
    <div class="image-editor">
        <Row :gutter="10">
            <Col span="18" offset="3">
            <Card class="slideList">
                <p slot="title" style="height: 34px">
                    <Icon type="ios-albums-outline"></Icon>
                    主播等级兑换比率设置(可编辑)
                    <Button type="success" @click="addAnchorLevel">添加等级</Button>
                </p>
                <div class="edittable-table-height-con">
                    <Table :columns="slideTableHead" :data="anchorLevelList" border :no-filtered-data-text="tipeNews" :no-data-text="tipeNews" ref="slideTableHead"></Table>
                </div>
            </Card>
            </Col>
        </Row>
        <Page :total="total" :current="page" :page-size="pageSize" @on-change="onCurrentChange" style="text-align: center"></Page>
        <Modal v-model="anchorLevelVatity" title="等级设置" @on-ok="handleSubmit('anchorLevelModel')" @on-cancel="handleReset('anchorLevelModel')">
            <Form :model="anchorLevelModel" :label-width="80">
                <FormItem label="等级">
                    <InputNumber :max="100" :min="0" v-model="anchorLevelModel.level" ></InputNumber>
                </FormItem>
                <FormItem label="经验">
                    <InputNumber :max="100000" :min="0" v-model="anchorLevelModel.exp" ></InputNumber>
                </FormItem>
                <FormItem label="兑换比率">
                    <InputNumber :max="100" :min="0" v-model="anchorLevelModel.rate" ></InputNumber>%
                </FormItem>
            </Form>
        </Modal>
    </div>
</template>

<script>
    export default {
        data () {
            return {
                //表头
                slideTableHead:[
                    {
                        title: '等级',
                        align: 'center',
                        key: 'level',
                        "sortable": true,
                    },
                    {
                        title: '经验',
                        align: 'center',
                        key: 'exp',
                    },

                    {
                        title: '兑换比率',
                        align: 'center',
                        key: 'rate',
                    },
                    {
                        title: '操作',
                        key: 'action',
                        width: 190,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'warning',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.upLevelConfig(params.index)
                                        }
                                    }
                                }, '修改'),
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            this.deleteLevelConfig(params.index)
                                        }
                                    }
                                }, '删除')
                            ]);
                        }
                    }
                ],
                selectURl:'/alevelconfig/list',
                upOrAddURl:'/alevelconfig/saveoredit',
                deleteURl:'/alevelconfig/delete',
                anchorLevelVatity:false,
                anchorLevelList:[],
                tipeNews:'暂无数据',
                anchorLevelModel:{},
                total:0,
                pageSize:0,
                page:1,
            }
        },
        created () {
            this.getData();
        },
        methods: {
            //初始化时获取数据
            getData () {
                let self=this;
                self.$axios.get(self.selectURl+'?curr='+self.page).then((res) => {
                    self.anchorLevelList = res.data.data.rows;
                    self.page = res.data.data.page;
                    self.pageSize = res.data.data.pagesize;
                    self.total = res.data.data.total;
                })
            },
            upLevelConfig(index){
                let self=this;
                self.anchorLevelModel = self.anchorLevelList[index];
                self.anchorLevelVatity = true;
            },
            deleteLevelConfig(index){
                let self=this;
                let anchorLevelModel = self.anchorLevelList[index];
                self.$axios.post(self.deleteURl+'/'+anchorLevelModel.id).then((res) => {
                    if (res.data.code==200){
                        self.$Message.success('恭喜您，此条设置删除成功');
                        self.getData();
                    }else {
                        self.$Message.error('抱歉，删除失败。请稍后重试!');
                        self.getData();
                    }
                })
            },
            addAnchorLevel(){
                let self=this;
                self.anchorLevelModel={};
                self.anchorLevelVatity = true;
            },
            handleSubmit(name){
                let self=this;
                self.anchorLevelVatity=false;
                self.$axios.post(self.upOrAddURl,self.anchorLevelModel).then((res) => {
                    if (res.data.code==200){
                        self.$Message.success('恭喜您，此条设置删除成功');
                        self.getData();
                    }else {
                        self.$Message.error('抱歉，删除失败。请稍后重试!');
                        self.getData();
                    }
                })
            },
            handleReset(name){
                this.anchorLevelVatity=false;
            },
            onCurrentChange(val){
                let self = this;
                self.page = val;
                self.getData();
            }
        }
    }
</script>